<template>
  <div>
    <div>
      <h3 style="margin-left:20px">新建项目</h3>
    </div>
    <el-form style="width:70%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="项目编号" prop='projSn'>
        <el-input class="taskAdd-row-title" placeholder="请输入唯一编号" size="medium" v-model="ruleForm.projSn" clearable>
          <!-- <template slot="append">@pm.redphase.net</template> -->
        </el-input>
      </el-form-item>

      <el-form-item label="项目邮箱">
        <el-input placeholder="请输入项目邮箱" v-model="mailbox">
          <template slot="append">@pm.redphase.net</template>
        </el-input>
       </el-form-item>
      <el-form-item label="项目名称" prop="name">
        <el-input class="taskAdd-row-title" placeholder="请输入内容" size="medium" v-model="ruleForm.name"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="选择模板">
        <el-select v-model="ruleForm.tempDirId" clearable style="width:100%" placeholder="请选择"
                   @visible-change="visibleChange">
          <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级项目">
        <projectselect style="width:100%" @parenIdtchange='parenIdtchange'></projectselect>
      </el-form-item>
      <el-form-item label="负责人" style="margin-bottom:0px" prop="masterUserId">
        <selectRoleTwo type='warehouse' :parentProjId='ruleForm.parentProjId' selectType='singleChoice'
                       style="width:100%" @selectsuccess='selectsuccess'></selectRoleTwo>
      </el-form-item>
      <el-form-item label="成员" style="margin-bottom:0px">
        <selectmember type='warehouse' :parentProjId='ruleForm.parentProjId' selectType='multipleChoice'
                      style="width:100%;" @selectsuccess='selectsuccessmamber'></selectmember>
      </el-form-item>
      <div style="width:100%;display:flex">
        <el-form-item label="开始日期" style="width:50%" prop="startDate">
          <el-date-picker v-model="ruleForm.startDate" value-format="yyyy-MM-dd" style="width:100%" type="date"
                          placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" style="width:50%" prop="endDate">
          <el-date-picker v-model="ruleForm.endDate" value-format="yyyy-MM-dd" style="width:100%" type="date"
                          placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </div>
      <el-form-item label="所属目录" prop="dirId">
        <div style=" width:100%;display:flex;justify-content: space-around;">
          <selectdir ref="selectdir" style="width:90%" @dirparenIdtchange='dirparenIdtchange' dirType='00'></selectdir>
          <el-button type="primary" @click="catalogue">新增</el-button>
        </div>
      </el-form-item>
      <div style="display:flex">
        <span
            style="font-size:14px;color:rgb(96, 98, 102);font-weight:700;width:100px;text-align: end;margin-right:12px">所属标签</span>
        <multipleChoiceTags :tags="ruleForm.tags" @tagChoose="tagChoose" type="00"
                            style="width: 100%;height: 100%;margin-bottom: 22px;"></multipleChoiceTags>
      </div>

      <el-form-item label="附件" prop="docFilePath">
        <div style="display: flex;flex-direction: column;" @click.stop="">
          <span v-for="item in ruleForm.docFilePath" v-if="ruleForm.docFilePath.length > 0"
                style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{ item.fileName }}</span>
        </div>
        <singlefileUpload style="width:100px" :ruleFormdocFilePath='ruleForm.docFilePath' ref="upload"
                          @uploadSave="uploadSave" @returnUrl="returnUrl" @uploadListShow="uploadListShow"
                          @uploadListDel="uploadListDel">
          <template v-slot:openDialog>

            <el-button style="width: 100px;" plain>上传附件</el-button>
          </template>
        </singlefileUpload>
      </el-form-item>
      <el-form-item label='简介'>
        <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- <uploadList style="z-index: 99999;" v-if="uploadForm.length > 0 && uploadListType == true"
  :uploadForm="uploadForm" @uploadListDel="uploadListDel"></uploadList> -->
    <folder ref="folder" @dirgetTreeDataclick='dirgetTreeDataclick'></folder>
  </div>
</template>
<script>
import projectselect from "@/components/projectComponents/selectproject";
import selectdir from "@/components/projectComponents/selectdir";
import {getTreeData} from "@/api/project";
import {getTreeData as dirgetTreeData} from "@/api/dir";
import {save} from "@/api/project";
import {deleteAction, getAction, postAction} from "@/api/manage";
import quillEditor from "@/components/quillEditor/index";
import multipleChoiceTags from "@/components/select/multipleChoiceTags";
import selectRoleTwo from "@/components/screen/selectRoleTwo";
import selectmember from "@/components/screen/selectmember";
import utils from "@/utils/utils";
import folder from "./components/folder";
import singlefileUpload from "@/components/upload/singlefileUpload";
import uploadList from "@/components/upload/uploadList.vue";

export default {
  name: "projectAdd",
  components: {
    quillEditor,
    selectRoleTwo,
    selectmember,
    projectselect,
    selectdir,
    multipleChoiceTags,
    folder,
    singlefileUpload,
    uploadList,
  },
  data() {
    let _this = this;
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    return {
      options: {},
      value1: "",
      projectTree: [],
      dirTree: [],
      mailbox: "",
      ruleForm: {
        name: "",
        parentProjId: "",
        isLeaf: 0,
        content: "",
        masterUserId: "", //负责人
        projLevel: "", //机构级次
        projLevelCode: "", //组织机构路径
        startDate: "",
        endDate: "",
        userList: [],
        dirId: "",
        tags: [],
        projSn: "",
        docFilePath: [],
        tempDirId: "",
        mailbox: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
        endDate: [
          {
            required: true,
            message: "请选择结束时间",
            trigger: "blur",
          },
        ],
        startDate: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "blur",
          },
        ],
        masterUserId: [
          {
            required: true,
            message: "请选择项目负责人",
            trigger: "blur",
          },
        ],
        dirId: [
          {
            required: true,
            message: "请选择项目目录",
            trigger: "blur",
          },
        ],
        projSn: [
          //  { validator: checkEmail, trigger: 'blur' }
          {
            required: true,
            message: "请输入项目编号",
            trigger: "blur",
          },
        ],
      },
      appproj: {
        name: "",
        current: 1,
        size: 20,
      },
      frequency: 0,
      uploadForm: [],
      uploadListType: false,
    };
  },
  created() {
    // this.listclick()
    // this.dirgetTreeDataclick()
  },
  methods: {
    fChkMail(szMail) {
      var szReg = /^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
      var bChk = szReg.test(szMail);
      return bChk;
    },
    visibleChange() {
      let params = new URLSearchParams();
      params.append("current", this.current);
      params.append("size", this.size);
      params.append("dirType", "11");
      dirgetTreeData(params).then((res) => {
        this.options = res.data.data;
      });
    },
    uploadListDel(data) {
      this.uploadForm.splice(data, 1);
    },
    uploadListShow(data) {
      this.uploadForm = this.ruleForm.docFilePath;
      this.uploadListType = data;
    },
    returnUrl(data) {
      var docFilePath = {
        fileName: data.name,
        fileUrl: data.url,
      };
      this.uploadForm.push(docFilePath);
      console.log("这是this.uploadForm");
      console.log(this.uploadForm);
    },
    //上传附件（确定按钮）
    uploadSave(val) {
      console.log("这是uploadSave");
      console.log(val);
      let _this = this;
      _this.ruleForm.docFilePath = _this.uploadForm;
      _this.$refs.upload.sucessClick();
    },
    dirgetTreeDataclick() {
      this.$refs.selectdir.dirgetTreeDataclick();
    },
    catalogue() {
      this.$refs.folder.loadFolder();
    },
    tagChoose(data) {
      console.log(data);
      this.ruleForm.tags = data;
    },
    parenIdtchange(data) {
      this.ruleForm.parentProjId = data;
    },
    dirparenIdtchange(data) {
      this.ruleForm.dirId = data;
    },
    selectsuccessmamber(data) {
      console.log(data);
      if (!utils.isNull(data)) {
        let userArrat = data.split(",");
        userArrat.forEach((item) => {
          let uers = {userId: item};
          this.ruleForm.userList.push(uers);
        });
      } else {
        this.ruleForm.userList = [];
      }
    },
    selectsuccess(data) {
      if (data.length > 0) {
        this.ruleForm.masterUserId = data[0].userId;
      }
    },
    submitForm(ruleForm) {
      var _this = this;
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          var myReg =
              /^(\w|(\.\w+))+@([a-zA-Z0-9_-]+\.)+(com|org|cn|net)+$/;
          var mailbox = _this.mailbox + "@pm.redphase.net";
          if (myReg.test(mailbox)) {
            _this.ruleForm.mailbox = mailbox
            save(_this.ruleForm)
                .then((res) => {
                  _this.$store
                      .dispatch("tagsView/delView", _this.$route)
                      .then(({visitedViews}) => {
                        _this.$router.push({
                          path: "/project/index",
                        });
                      }); // 关闭当前tab回到列表
                })
                .catch();
          } else {
            _this.$message.error('邮箱格式错误，请输入正确的邮箱');
          }
        }
      });
    },
    resetForm() {
      this.$store
          .dispatch("tagsView/delView", this.$route)
          .then(({visitedViews}) => {
            this.$router.push({
              path: "/project/index",
            });
          }); // 关闭当前tab回到列表
    },
  },
};
</script>
<style scoped>
.avatar {
  border-radius: 50%;
  width: 30px;
  /* height: 30px; */
}

.milepostselect {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  /* height: 50px; */
  /* background-color: blanchedalmond; */
  justify-content: space-between;
}

.milepostselect_div {
  display: flex;
  align-items: center;
}

.milepstdate {
  display: flex;
  width: 100%;
}

.projSnclass {
  /* height: 30px; */
  border: 1px solid #ccc;
  padding: 2px;
  padding-left: 10px;
  background-color: rgb(245, 247, 250);
}
</style>
